<template>
  <div class="haveSelectTree" :style="{height:height}">
    <div
      class="header-title"
      :style="{height:headerTitle==='' ? '20px' : '',lineHeight:headerTitle==='' ? '20px' : ''}"
    >{{headerTitle}}</div>
    <div class="haveSelectTree-select">
      
      <Input
        v-model="value"
        icon="ios-search"
        :placeholder="placeholder"
        style="width: 100%"
        @on-click="onClick"
      />
    </div>
    
    <div
      class="tree-box"
      :style="{height: innerHeight==='' ? ('calc(' + '100% - ' + ( !headerTitle ? '86px' : '116px') + ')') : innerHeight,'overflow-y':onScroll ? '': 'auto'}"
    >

      <slot>
        <Spin size="large" v-if='spinShow'></Spin>
        <Tree
          v-if="!spinShow"
          :ref="treeRef"
          :data="treeData"
          :render="renderContent"
          :show-checkbox="showCheckbox"
          @on-select-change="selectChange"
          @on-click-change="clickChange"
          @on-check-change="checkChang"
          @on-toggle-expand="toggle"
        ></Tree>
        
      </slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'inputTree',
  props: {
    spinShow:{
      type:Boolean,
      default:false
    },
    // 设置tree的ref
    // 标题
    headerTitle: {
      type: String,
      default: ''
    },
    // input的placeholder
    placeholder: {
      type: String,
      default: ''
    },
    // input的value
    value: {
      type: String,
      default: ''
    },
    // 是否显示checkbox
    showCheckbox: {
      type: Boolean,
      default: false
    },
    // tree data
    treeData: {
      type: Array,
      default () {
        return []
      }
    },
    renderContent: {
      type: Function,
      default: null
    },
    height: {
      type: String,
      default: '100%'
    },
    innerHeight: {
      type: String,
      default: ''
    },
    onScroll: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      treeRef: 'tree'+new Date().getTime()
    }
  },
  methods: {
    onClick () {
      this.$emit('on-click', this.value)
    },
    selectChange (val) {
      this.$emit('on-select-change', val)
    },
    clickChange (val) {
      this.$emit('on-click-change', val)
    },
    checkChang (val) {
      this.$emit('on-check-change', val)
    },
    toggle (val) {
      this.$emit('on-toggle-expand', val)
    },
    getCheckedNodes () {
      return this.$refs[this.treeRef].getCheckedNodes()
    },
    getSelectedNodes () {
      return this.$refs[this.treeRef].getSelectedNodes()
    },
    getCheckedAndIndeterminateNodes () {
      return this.$refs[this.treeRef].getCheckedAndIndeterminateNodes()
    }
  }
}
</script>

<style lang='scss'>
.haveSelectTree {
  @import "../../styles/common/color.scss";
  $imgUrl: "~@/assets/img/";
  min-height: 100%;
  // background-color: $treeBg;
  .header-title {
    color: $titleColor;
  }
  .ivu-input-wrapper-large .ivu-input-icon {
      font-size: 18px;
      height: 28px;
      line-height: 28px;
  }
  .ivu-input-large{
    font-size: 14px;
  }
  .header-title {
    padding: 0 0.08rem;
    font-size: 0.16rem;
    height: 50px;
    line-height: 50px;
  }
  .haveSelectTree-select {
    padding: 0 8px;
    .ivu-input,.ivu-input-icon{
      height:28px;
      line-height:28px;
    }


  }
  .ivu-spin-dot{
    margin: auto
  }
  .tree-box {
    line-height: 30px;
    padding: 10px 0 20px 10px;
    // overflow-x:hidden!important;
    // overflow: auto;
    .ivu-tree-title {
      // color: $treeText;
      color:#1a1e2c;
      width: 88%;
      white-space: nowrap;
      // overflow: hidden;
      text-overflow: ellipsis;
      &.ivu-tree-title-selected {
        color: $selectColor;
        background-color: transparent;
      }
      &:hover {
        color: $selectColor;
        background-color: transparent;
      }
      &.ivu-tree-title-isvirtual{
        color: #999;
      }
      .ivu-tree-title-isvirtual{
        color: #999;
      }
    }
    .ivu-tree-arrow.ivu-tree-arrow-open {
      .ivu-icon-ios-arrow-forward {
        transform: rotate(180deg);
        &:before {
          content: url($imgUrl+"equip_icon_02.png");
        }
      }
    }
    .ivu-tree-arrow {
      margin-right: 7px;
      .ivu-icon-ios-arrow-forward {
        &:before {
          content: url($imgUrl+"equip_icon_01.png");
        }
      }
    }
  }
}
</style>
